<template>
	<div class="footer_nav">
		<van-tabbar v-model="data.footerActive">
			<van-tabbar-item name="Home" replace @click="changeTab(false)">
				<template #icon="props"> <img :src="props.active ? image.qrActive : image.qrUnActive" /> </template
				>活码详情</van-tabbar-item
			>
			<van-tabbar-item name="My" replace @click="changeTab(true)">
				<template #icon="props"> <img :src="props.active ? image.tgActive : image.tgUnActive" /> </template
				>推广详情</van-tabbar-item
			>
		</van-tabbar>
	</div>
</template>

<script setup name="footerNav">
	const props = defineProps({
		id: String
	})
	const emits = defineEmits(['changeTab'])

	const changeTab = (bool) => {
		data.footerActive = bool ? 'My' : 'Home'
		emits('changeTab', bool)
	}

	let data = reactive({
		footerActive: 'Home'
	})
	const image = {
		qrActive: new URL('../../assets/images/activeQr.png', import.meta.url).href,
		qrUnActive: new URL('../../assets/images/unActiveQr.png', import.meta.url).href,
		tgActive: new URL('../../assets/images/activeTuiguang.png', import.meta.url).href,
		tgUnActive: new URL('../../assets/images/unActiveTuiguang.png', import.meta.url).href
	}
</script>
